<template>
    <page-header-wrapper>
      <a-card :bordered="false">
        <div class="table-page-search-wrapper">
          <a-row type="flex" justify="start">
            <span v-for="btn in btns" :key="btn.name" @click="selected(btn.name)" 
            style="margin-right: 60px" :class="{'active': btn.name == activeName}" class="mouseOn">
              {{ btn.name }}
            </span>
          </a-row>
          <a-row type="flex" justify="start" style="margin: 20px 0" >
            <a-col :span="4" style="margin-right: 10px">
              <a-input v-model="value" placeholder="输入关键字"></a-input>
            </a-col>
            <a-col :span="4">
              <a-config-provider :auto-insert-space-in-button="false">
                <a-button type="primary" @click="toSearch">
                  查找
                </a-button>
              </a-config-provider>
            </a-col>
          </a-row>
        </div>
        <a-table :row-selection="rowSelection" :columns="columns" :data-source="info" bordered :pagination="false">
            <div slot="content" slot-scope="item">
              <a @click="toContent">{{item}}</a>
            </div>
        </a-table>
        <a-row class="mt-40">
              <a-col :span="12" :offset="6" style="display: flex">
                <a-pagination size="large" :total="100" show-size-changer show-quick-jumper @change="pageChange"/>
                <a-button type="primary">确定</a-button>
              </a-col>
        </a-row>
      </a-card>
    </page-header-wrapper>
</template>

<script>
  export default {
    data() {
      return {
        value:'',
        activeName:'',
        columns: [
          {
            title: '编号',
            dataIndex: '编号',
            align: 'center'
          }, {
            title: '产品名称',
            dataIndex: '产品名称',
            align: 'center'
          }{
          title: '创建时间',
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          align: 'center',
        },,{
            title: '状态',
            dataIndex: '状态',
            align: 'center'
          },{
            title: '操作',
            dataIndex: 'content',
            align: 'center',
            scopedSlots: { customRender: 'content' }
          }
        ],
        info:[{
            key: '1',
            编号: '16513230',
            产品名称: '产品名称1',
            上传时间: '2016-9-5  09:16',
            状态: '待审核',
            content: '详情'
          },{
            key: '2',
            编号: '16513230',
            产品名称: '产品名称2',
            上传时间: '2016-9-5  09:16',
            状态: '待审核',
            content: '详情'
          },{
            key: '3',
            编号: '16513230',
            产品名称: '产品名称3',
            上传时间: '2016-9-5  09:16',
            状态: '待审核',
            content: '详情'
          },{
            key: '4',
            编号: '16513230',
            产品名称: '产品名称4',
            上传时间: '2016-9-5  09:16',
            状态: '待审核',
            content: '详情'
          }
        ],
        btns:[{name:'待审核'},{name:'全部'},{name:'已审核'},{name:'已退回'}]
      }
    },
    methods:{
      pageChange(pageNumber) {
        console.log('Page: ', pageNumber);
      },
      toSearch(){
        console.log(22333,this.value)
      },
      selected(name){
        console.log(2233,name)
        this.activeName = name
      },
      toContent(){
        this.$router.push({name: 'ProductInfo'})
      }
    },
    computed: {
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .active{
    color: #1890ff !important;
  }
  .mouseOn:hover{
    cursor: pointer;
    color: #1890ff !important;
  }
</style>
